import React, { useMemo } from "react";
import styles from "./index.module.less";
import Container from "../../container";
import FileItem from "./components/FileItem";
import { PlusOutlined } from "@ant-design/icons";
import { COMPILER_FILE_ENUM } from "../../enum";

export interface FileItemType {
  label: string;
  key: string;
  onClick: () => void;
  closable: boolean;
}

function FileSelector() {
  const { files, handleFileAdd, setCurrentFileName } = Container.useContainer();

  const items = useMemo(() => {
    return Object.values(files).map((item) => {
      return {
        label: item.name,
        key: item.name,
        onClick: () => {
          setCurrentFileName(item.name);
        },
        closable:
          item.name !== COMPILER_FILE_ENUM.IMPORT_MAP_FILE_NAME &&
          item.name !== COMPILER_FILE_ENUM.APP_FILE_NAME, // 主文件和es映射文件禁止关闭和删除
      };
    }) as FileItemType[];
  }, [files, setCurrentFileName]);

  const itemsFile = useMemo(() => {
    return {
      left: items.filter(
        (item) => item.key !== COMPILER_FILE_ENUM.IMPORT_MAP_FILE_NAME
      ),
      right: items.find(
        (item) => item.key === COMPILER_FILE_ENUM.IMPORT_MAP_FILE_NAME
      ),
    };
  }, [items]);

  return (
    <React.Fragment>
      <div className={styles.tabs}>
        <div className={styles.tabsLeft}>
          {itemsFile.left.map((item, index) => {
            return <FileItem item={item} key={index} />;
          })}
          <div className={styles.addFile} onClick={handleFileAdd}>
            <PlusOutlined />
          </div>
        </div>
        <div className={styles.tabsRight}>
          <div className={styles.mapJson}>
            <FileItem item={itemsFile.right!} />
          </div>
        </div>
      </div>
    </React.Fragment>
  );
}

export default FileSelector;
